<template>
    <div class="form">
        <div class="input">
            <div class="title">
                登录
            </div>
            <div class="mb20"/>
            <el-form
                ref="input"
                label-position="left"
                label-width="80px"
                :model="signInForm">
                <el-form-item
                    prop="email"
                    label="邮箱"
                    :rules="[
                        {
                            required: true,
                            message: '请输入邮件地址',
                            trigger: 'blur',
                        },
                        {
                            type: 'email',
                            message: '请输入正确的邮件地址',
                            trigger: ['blur', 'change'],
                        },
                    ]">
                    <el-input v-model="signInForm.email"/>
                </el-form-item>
                <el-form-item
                    prop="password"
                    label="密码"
                    :rules="[
                        {
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur',
                        },
                        {
                            validator: validatePwdLen,
                            trigger: ['blur']
                        }
                    ]">
                    <el-input v-model="signInForm.password" show-password />
                </el-form-item>
            </el-form>
            <div class="tip">
                <label>
                    还没有账号？点击
                    <span @click="toRegister()">注册</span>
                </label>
            </div>
            <div class="action">
                <span @click="login()">登录</span>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "@/utils/MyAxios"
import qs from "qs"
import { ElMessage } from 'element-plus'
export default {
    name: 'LoginForm',
    data() {
        var validatePwdLen = (rule, value, callback) => {
            if (value.length > 20 || value.length < 6)
                callback(new Error('密码长度应在6~20位'))
            else
                callback()
        }
        return {
            signInForm: {
                email: '',
                password: '',
            },
            validatePwdLen
        }
    },
    methods: {
        login() {
            this.$refs.input.validate((valid) => {
                if (valid) {
                    axios.post('/api/user/login', qs.stringify(this.signInForm))
                        .then(res => {
                            console.log(res)
                            const data = res.data
                            if (data.code == 0) {
                                ElMessage.success({
                                    showClose: true,
                                    message: data.msg
                                })
                                let user = {
                                    token: data.data.token
                                }
                                localStorage.setItem('user', JSON.stringify(user))
                                localStorage.setItem('token', user.token)
                                // window.open('/index', '_self')
                                history.go(-1);
                            } else {
                                ElMessage.error({
                                    showClose: true,
                                    message: data.msg
                                })
                            }
                        })
                        .catch(err => {
                            console.log(err)
                            ElMessage.info({message: err.message, showClose: true})
                        })
                }
            })
        },
        toRegister() {
            this.$router.replace('/user/sign/register')
        }
    }
}
</script>

<style scoped>
.form {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title {
    margin: 10px;
    text-align: left;
    font-size: 30px;
}
.mb20 {
    margin-bottom: 20px;
}
.tip {
    display: flex;
    flex-direction: row-reverse;
}
.tip > label {
    font-size: 10px;
}
.tip > label > span {
    color: #4ab3fa;
    cursor: pointer;
}
.action {
    display: inline-flex;
    width: 80%;
    height: 40px;
    margin: 10px;
}
.action span {
    width: 100%;
    background-color:#2f71dc;
    color: #fff;
    margin-inline: 15px;
    cursor: pointer;
    font-size: 20px;
    line-height: 40px;
    border-radius: 10px;
}
</style>